<template>
  <div class="layui-fluid">
    <div class="layui-card">
      <div
        class="layui-form layui-card-header layuiadmin-card-header-auto"
        style="padding: 15px 15px 0px 15px"
      >
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">系统标识</label>
            <div class="layui-input-block">
              <input
                type="text"
                v-model.trim="system.systemKey"
                placeholder="请输入系统标识"
                class="layui-input"
              />
            </div>
          </div>
          <div class="layui-inline">
            <button
              class="layui-btn"
              lay-submit=""
              lay-filter="search"
              id="search"
            >
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="layui-card-body">
        <div style="padding-bottom: 10px">
          <button
            class="layui-btn layui-btn-sm layuiadmin-btn-admin"
            layui-filter="add"
            v-on:click="addSystemInfo"
          >
            <i class="layui-icon">&#xe608;</i>
            添加系统信息
          </button>
          <button
            class="layui-btn layui-btn-sm layui-btn-danger"
            url="${ctxPath}/manager/delUser.do"
            layui-delete="deleteUser"
            field="id"
            table="dataTable"
          >
            <i class="layui-icon">&#xe640;</i>
            删除所选系统
          </button>
        </div>
        <table id="dataTable" lay-filter="tableEvent"></table>
      </div>
    </div>
    <div id="barDemo" style="display: none">
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
        >删除</a
      >
    </div>
  </div>
</template>
<script>
export default {
  name: "ActSystemList",
  data() {
    return {
      system: {},
      cols: [
        [
          {
            type: "checkbox",
            field: "id",
            align: "center",
          },
          {
            field: "systemKey",
            title: "系统标识",
            align: "center",
          },
          {
            field: "systemName",
            title: "系统名称",
            align: "center",
          },
          {
            field: "taskTimeout",
            title: "用户超时时间",
            align: "center",
          },
          {
            field: "taskTimeoutType",
            title: "用户超时时间类型",
            align: "center",
            templet: function (res) {
              return "<div>" + res.taskTimeoutType.desc + "</div>";
            },
          },
          {
            field: "taskApproachTimeout",
            title: "用户临期时间",
            align: "center",
          },
          {
            field: "taskApproachTimeoutType",
            title: "用户临期时间类型",
            align: "center",
            templet: function (res) {
              return "<div>" + res.taskApproachTimeoutType.desc + "</div>";
            },
          },
          {
            field: "status",
            title: "状态",
            align: "center",
            templet: function (res) {
              if (res.status == "1") {
                return "<div>正常</div>";
              }
              if (res.status == "2") {
                return "<div>锁定</div>";
              }
              if (res.status == "0") {
                return "<div>已删除</div>";
              }
              return "<div>未知</div>";
            },
          },
          {
            fixed: "right",
            title: "操作",
            align: "center",
            toolbar: "#barDemo",
          },
        ],
      ],
    };
  },
  mounted: function () {
    this.loadTableData();
  },
  methods: {
    loadTableData: function () {
      var obj = {};
      obj.url = this.actSystem + "/listData";
      obj.cols = this.cols;
      obj.tableId = "dataTable";
      obj.where = {
        systemKey: this.system.systemKey,
      };
      this.renderTable(obj); //其中url tableId以及cols为必传其他参数个性化参数请参考layui数据表格
    },
    addSystemInfo: function () {
      this.openEditPage("", "添加系统信息");
    },
    edit: function (data) {
      this.openEditPage(data.id, "编辑系统信息");
    },
    openEditPage: function (id, title) {
      var that = this;
      this.openPage({
        url: "/manager/systemManager/actSystemList/edit?id=" + id,
        title: title,
        end: function () {
          that.loadTableData();
        },
      });
    },
  },
};
</script>